<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('查看调查问卷',~{::style})">
    <style>
        body{overflow: hidden;}
        .main{padding: 0.2rem;background: #e4e4e4;}
        .main .head{border:1px solid #cdcdcd;}
        .main .head h3{width: 100%;background:#fff;text-align: center;padding: 0.15rem 0;}
        .main .headinfo{width:100%;display:flex;display:-webkit-flex;border: 1px solid #cdcdcd;background: #f6f6f6;}
        .main .headinfo span{flex:1;padding: 0.1rem;}
        .main .headinfo span:nth-of-type(2n + 1){text-align: right;}
        .main .contain{padding: 0.2rem 0;}
        .main .contain .formItem{}
        .main .contain .formItem ul{width: 100%;height:auto;}
        .main .contain .formItem ul li{padding: 0.05rem 0;color: #333;}
        .main .contain .formItem ul li .optionItem{padding: 0.05rem 0;}
        .main .contain .formItem ul .addOption{width: 2.5rem;margin-left: 1.1rem;background:#fff;color:#ccc;border: 1px solid #e5e5e5;}
        .main .contain .formItem ul li .labelstyle{margin-right: 0.1rem;text-align: right;display: inline-block;width: 1rem;}
        .main .contain .formItem ul .radioDiv{padding: 0.05rem 0;}
        .main .contain .itemModel{}
        .main .contain .itemModel h3{font-size:0.14rem;background: #f6f6f6;padding: 0.2rem;}
        .main .contain .itemModel .itemstyle{background: #fff;padding: 0.2rem;margin-bottom: 0.3rem;}
        .main .contain .itemModel p{font-size:0.14rem;color:#999;}
        .main .contain .itemModel div{font-size:0.14rem;padding: 0 0.1rem;}
        .main .contain .itemModel div label{margin-right:0.5rem;color: #666;font-weight: normal;padding: 0.1rem 0;}
        .main .contain .itemModel textarea{width: 100%;height: 1rem;padding: 0.1rem;resize: none;margin-top: 0.1rem;border: 1px solid #cdcdcd;}
        .main .contain .itemModel .controlbtn{text-align:right;}
        .main .contain .itemModel .controlbtn a{color: #0b8ad5;text-decoration: underline;cursor:pointer;padding: 0 0.1rem;}
        .main .summary{padding: 0.1rem 0.2rem;}
    </style>
<body style="overflow-x:hidden;overflow-y: auto">
    <div class="main">
        <div class="head">
            <h3 th:text="${qustionnaire.paperTitle}"></h3>
        </div>
        <div class="headinfo">
            <span>学员：</span>
            <span th:text="${qustionnaire.qoc.studentLogin}"></span>
            <span>老师：</span>
            <span th:text="${qustionnaire.qoc.teacher}"></span>
            <span>上课时间：</span>
            <span th:text="${#dates.format(qustionnaire.qoc.releaseTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
        </div>
        <div class="summary" th:text="${#strings.replace(qustionnaire.paperSummary,'{学员名}',qustionnaire.qoc.personName).replace('{ssc}',qustionnaire.qoc.sscName).replace('{teacher}',qustionnaire.qoc.teacher)}"></div>
        <div class="contain" style="">
            <div class="quitem">
                <div class="itemModel" th:each="questionAndOption ,iterStat: ${qustionnaire.questionAndOptionsList}">
                    <h3 th:attr="questionId =${questionAndOption.question.questionId}"
                        th:text="${iterStat.index+1}+'、'+${#strings.replace(questionAndOption.question.questionName,'{学员名}',qustionnaire.qoc.personName).replace('{ssc}',qustionnaire.qoc.sscName).replace('{teacher}',qustionnaire.qoc.teacher)} "
                    >
                    </h3>
                    <div class="itemstyle">
                        <p th:if="${questionAndOption.question.caption != null}">
                            <span th:text="${#strings.replace(questionAndOption.question.caption,'{学员名}',qustionnaire.qoc.studentLogin).replace('{ssc}',qustionnaire.qoc.sscName).replace('{teacher}',qustionnaire.qoc.teacher)}"></span>
                        </p>
                        <div th:each="optionList : ${questionAndOption.optionList}">
                            <label>
                                <input th:type="radio" th:checked="${optionList.optionId == questionAndOption.questionUserAnswer.optionId}"
                                          th:text="${optionList.optionName}" th:attr="optionId = ${optionList.optionId}"  disabled/>
                            </label>
                        </div>
                        <p th:if="${questionAndOption.question.endnotes != null}">
                            <span th:text="${#strings.replace(questionAndOption.question.endnotes,'{学员名}',qustionnaire.qoc.personName).replace('{ssc}',qustionnaire.qoc.sscName).replace('{teacher}',qustionnaire.qoc.teacher)}"></span>
                        </p>
                        <p th:if="${questionAndOption.question.state == 1 and !#strings.isEmpty(questionAndOption.questionUserAnswer.optionSummary)}">
                            <textarea th:text="${questionAndOption.questionUserAnswer.optionSummary}" readonly></textarea>
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div th:include="include/onload_js::onloadJSCustom(~{::script})">
        <script>
            $(function() {

            })

            // function addOption (_this) {
            //     console.log($(_this).parents('.formItem').find('.optionItem').last())
            //     $(_this).parent('li').prev().append($(_this).parents('.formItem').find('.optionItem').last().clone())
            // }
            // function  confirmItem (_this) {
            //     var quitem = $(_this).parents('.quitem')
            //     var formitem = quitem.find('.formItem')
            //     var itemModel = quitem.find('.itemModel')
            //     formitem.hide()
            //     itemModel.show()
            // }
            // function  showFormItem (_this) {
            //     var quitem = $(_this).parents('.quitem')
            //     var formitem = quitem.find('.formItem')
            //     var itemModel = quitem.find('.itemModel')
            //     formitem.show()
            //     itemModel.hide()
            // }
        </script>
</body>
</html>
